<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="description" content="Gan Xiao chuan&#39;s blog">
  <meta name="keyword" content="hexo-theme, vuejs, GXC, ganxiaochuan">
  
    <link rel="shortcut icon" href="/gxc_doc/css/images/logo.png">
  
  <title>
    
      GXC&#39;s blog
    
  </title>
  <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="//cdn.bootcss.com/highlight.js/9.12.0/styles/tomorrow.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/gxc_doc/css/style.css">
<link rel="stylesheet" href="/gxc_doc/css/plugins/gitment.css">
  <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="//cdn.bootcss.com/geopattern/1.2.3/js/geopattern.min.js"></script>
  <script src="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>
  <script src="/gxc_doc/js/qrious.js"></script>
<script src="/gxc_doc/js/gitment.js"></script>
</head>
<div class="wechat-share">
  <img src="/css/images/logo.png" />
</div>

  <body>
    <header class="header fixed-header">
  <div class="header-container">
    <a class="home-link" href="/gxc_doc/">
      <div class="logo"></div>
      <span>GXC's blog</span>
    </a>
    <ul class="right-list">
      
        <li class="list-item">
          
            <a href="/gxc_doc/" class="item-link">Home</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/gxc_doc/tags/" class="item-link">Tags</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/gxc_doc/archives/" class="item-link">Archives</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/gxc_doc/project/" class="item-link">Projects</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/gxc_doc/about/" class="item-link">About</a>
          
        </li>
      
    </ul>
    <div class="menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div class="menu-mask">
      <ul class="menu-list">
        
          <li class="menu-item">
            
              <a href="/gxc_doc/" class="menu-link">Home</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/gxc_doc/tags/" class="menu-link">Tags</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/gxc_doc/archives/" class="menu-link">Archives</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/gxc_doc/project/" class="menu-link">Projects</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/gxc_doc/about/" class="menu-link">About</a>
            
          </li>
        
      </ul>
    </div>
  </div>
</header>

    <main class="app-body">
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/gxc_doc/2017/12/05/App/">App</a>
      </h2>
      <p class="article-date">December 5, 2017</p>
      
        
  <a href="/gxc_doc/gxc_doc/tags#功能" >
    <span class="tag-code">功能</span>
  </a>

      
      <div class="article-summary">
        
          
IOS功能组件，弹出IOSAPP 







    Vue.use(gxc);
    var page=new Vue({
        el:'.temp'
    })


代码块123&lt;template&gt;	&lt;app scheme="com.PHMall.a ...
        
      </div>
      <a class="more" href="/gxc_doc/2017/12/05/App/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/gxc_doc/2017/12/05/Countdown/">Countdown</a>
      </h2>
      <p class="article-date">December 5, 2017</p>
      
        
  <a href="/gxc_doc/gxc_doc/tags#功能" >
    <span class="tag-code">功能</span>
  </a>

      
      <div class="article-summary">
        
          
倒计时功能组件，可以通过css 自定义样式 






    


    Vue.use(gxc);
    var page=new Vue({
        el:'.temp'
    })


代码块123&lt;template&gt;	&lt;timeitem t="1 ...
        
      </div>
      <a class="more" href="/gxc_doc/2017/12/05/Countdown/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/gxc_doc/2017/12/05/slide/">slide</a>
      </h2>
      <p class="article-date">December 5, 2017</p>
      
        
  <a href="/gxc_doc/gxc_doc/tags#功能" >
    <span class="tag-code">功能</span>
  </a>

      
      <div class="article-summary">
        
          
手机版UI,左滑出现删除和确认






    
        
            请把我往左滑
        
    


    Vue.use(gxc);
    var page=new Vue({
        el:'.temp'
    })


代码块12 ...
        
      </div>
      <a class="more" href="/gxc_doc/2017/12/05/slide/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/gxc_doc/2017/12/03/infinite/">infinite</a>
      </h2>
      <p class="article-date">December 3, 2017</p>
      
        
  <a href="/gxc_doc/gxc_doc/tags#功能" >
    <span class="tag-code">功能</span>
  </a>

      
      <div class="article-summary">
        
          
手机版功能组件，下拉刷新，请用手机访问






     
        我是下拉组件，下拉刷新
     


.Load_div{
    width:calc( 100% - 40px);
    /*这个是因为hexo 主题，一般宽度不需要特别设定*/
}


    Vue ...
        
      </div>
      <a class="more" href="/gxc_doc/2017/12/03/infinite/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/gxc_doc/2017/11/27/navbar/">Navbar</a>
      </h2>
      <p class="article-date">November 27, 2017</p>
      
        
  <a href="/gxc_doc/gxc_doc/tags#布局" >
    <span class="tag-code">布局</span>
  </a>

      
      <div class="article-summary">
        
          
菜单栏，多页，不一定用于顶部，可用于手机或PC 






    
        
            我是自定义页面1
                
    


    Vue.use(gxc);
    var page=new Vue({
        el:'.t ...
        
      </div>
      <a class="more" href="/gxc_doc/2017/11/27/navbar/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/gxc_doc/2017/11/27/search/">Search</a>
      </h2>
      <p class="article-date">November 27, 2017</p>
      
        
  <a href="/gxc_doc/gxc_doc/tags#布局" >
    <span class="tag-code">布局</span>
  </a>

      
      <div class="article-summary">
        
          
搜索栏，主要用于手机界面 






    
    
    


    Vue.use(gxc);
    var page=new Vue({
        el:'.temp',
        methods:{
         search: function(val ...
        
      </div>
      <a class="more" href="/gxc_doc/2017/11/27/search/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/gxc_doc/2017/11/27/header/">Header</a>
      </h2>
      <p class="article-date">November 27, 2017</p>
      
        
  <a href="/gxc_doc/gxc_doc/tags#布局" >
    <span class="tag-code">布局</span>
  </a>

      
      <div class="article-summary">
        
          
顶部栏，主要用于手机界面 






    
    
    


    Vue.use(gxc);
    var page=new Vue({
        el:'.temp',
        methods:{
            TopLeft:function( ...
        
      </div>
      <a class="more" href="/gxc_doc/2017/11/27/header/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/gxc_doc/2017/11/24/Button/">Button</a>
      </h2>
      <p class="article-date">November 24, 2017</p>
      
        
  <a href="/gxc_doc/gxc_doc/tags#布局" >
    <span class="tag-code">布局</span>
  </a>

      
      <div class="article-summary">
        
          
手机版按钮，可以通过修改 CSS 对边框及颜色进行自定义 






    
        
    
    
    
        我是自定义按钮
    
    
    
    


    Vue.use(gxc);
    var page=new Vue({
  ...
        
      </div>
      <a class="more" href="/gxc_doc/2017/11/24/Button/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/gxc_doc/2017/11/24/GXC/">GXC简介</a>
      </h2>
      <p class="article-date">November 24, 2017</p>
      
        
  <a href="/gxc_doc/gxc_doc/tags#简介" >
    <span class="tag-code">简介</span>
  </a>

      
      <div class="article-summary">
        
          GXCGXC是一款由Vue编写的组件库，目前优先开发手机端，后期会补充增加PC端组件，专为前端开发人员打造的积木，通过精心的设计与技术实现，使前端开发像搭积木一样，只需要将小积木拼凑成大积木就能完成开发，带来前所未有的开发体验。特点概述：

功能丰富 ：包含各种常见的组件，并尽我最大的能力， ...
        
      </div>
      <a class="more" href="/gxc_doc/2017/11/24/GXC/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/gxc_doc/2017/11/23/UseNow/">立即使用</a>
      </h2>
      <p class="article-date">November 23, 2017</p>
      
        
  <a href="/gxc_doc/gxc_doc/tags#简介" >
    <span class="tag-code">简介</span>
  </a>

      
      <div class="article-summary">
        
          立即使用使用前提在使用GXC前，我们假设你已经有了一定的JavaScript 基础以及Vue基础(至少知道怎么使用最基础的Vue知识)，那么你已经符合使用GXC的条件了，让我们开始吧。

引用GXC
我们已经将GXC打包好了，你需要在引用Vue后引用一个js文件以及两个css文件即可。    ...
        
      </div>
      <a class="more" href="/gxc_doc/2017/11/23/UseNow/">Read more</a>
    </article>
  

  
</main>


    <div class="scroll-top">
  <span class="arrow-icon"></span>
</div>
    <footer class="app-footer">
  <p class="copyright">
    &copy; 2017 | Proudly powered by <a href="https://hexo.io" target="_blank">Hexo</a>
    <br>
    Theme by <a href="https://github.com/yanm1ng">yanm1ng</a>
  </p>
</footer>

<script>
  function async(u, c) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }
</script>
<script>
  async("//cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js", function(){
    FastClick.attach(document.body);
  })
</script>

<script>
  var hasLine = 'true';
  async("//cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js", function(){
    $('figure pre').each(function(i, block) {
      var figure = $(this).parents('figure');
      if (hasLine === 'false') {
        figure.find('.gutter').hide();
      }
      var lang = figure.attr('class').split(' ')[1] || 'code';
      var codeHtml = $(this).html();
      var codeTag = document.createElement('code');
      codeTag.className = lang;
      codeTag.innerHTML = codeHtml;
      $(this).attr('class', '').empty().html(codeTag);
      figure.attr('data-lang', lang.toUpperCase());
      hljs.highlightBlock(block);
    });
  })
</script>
<!-- Baidu Tongji -->

<script src="/gxc_doc/js/script.js"></script>
  </body>
</html>